---
title: Елемент меню
image: /images/user-guide/kanban-views/kanban.png
---

<Frame>
  <img src="/images/user-guide/kanban-views/kanban.png" alt="Header" />
</Frame>

Універсальний елемент меню, призначений для використання у меню або списку навігації.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItem } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  const handleButtonClick = (event) => {
    console.log("Icon button clicked!", event);
  };

  return (
    <MenuItem
      LeftIcon={IconBell}
      accent="default"
      text="Menu item text"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={true}
      testId="menu-item-1"
      onClick={handleMenuItemClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Властивості   | Тип           | Опис                                                                                                                              |
| ------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| LeftIcon      | IconComponent | Додатковий лівий значок, що відображається перед текстом у елементі меню                                                          |
| accent        | рядок         | Визначає кольоровий акцент елементу меню. Options include: `default`, `danger`, and `placeholder` |
| текст         | рядок         | Текстовий вміст елементу меню                                                                                                     |
| iconButtons   | масив         | Масив об’єктів, що представляють додаткові кнопки-знаки, пов’язані з елементом меню                                               |
| isTooltipOpen | булевий тип   | Керує видимістю підказки, пов’язаної з елементом меню                                                                             |
| testId        | рядок         | Атрибут data-testid для цілей тестування                                                                                          |
| onClick       | функція       | Функція зворотного виклику, що спрацьовує при натисканні елементу меню                                                            |
| className     | рядок         | Необов'язкове ім'я для додаткового стилювання                                                                                     |

</Tab>
</Tabs>

## Варіанти

Різні варіанти компонента елементу меню включають наступні:

### Команда

Елемент меню в стилі команди всередині меню для позначення комбінацій клавіш.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemCommand } from "twenty-ui/display";

export const MyComponent = () => {
  const handleCommandClick = () => {
    console.log("Command clicked!");
  };

  return (
    <MenuItemCommand
      LeftIcon={IconBell}
      text="First Option"
      firstHotKey="⌘"
      secondHotKey="1"
      isSelected={true}
      onClick={handleCommandClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Властивості  | Тип           | Опис                                                                     |
| ------------ | ------------- | ------------------------------------------------------------------------ |
| LeftIcon     | IconComponent | Додатковий лівий значок, що відображається перед текстом у елементі меню |
| текст        | рядок         | Текстовий вміст елементу меню                                            |
| firstHotKey  | рядок         | The first keyboard shortcut associated with the command                  |
| secondHotKey | рядок         | The second keyboard shortcut associated with the command                 |
| isSelected   | булевий тип   | Вказує, чи вибрано або підсвічено елемент меню                           |
| onClick      | функція       | Функція зворотного виклику, що спрацьовує при натисканні елементу меню   |
| className    | рядок         | Необов'язкове ім'я для додаткового стилювання                            |

</Tab>
</Tabs>

### Переміщуваний

Переміщуваний елемент меню, призначений для використання у меню або списку, де елементи можна переміщувати, а додаткові дії можна виконувати через іконки кнопок.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItemDraggable } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  return (
    <MenuItemDraggable
      LeftIcon={IconBell}
      accent="default"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={false}
      onClick={handleMenuItemClick}
      text="Menu item draggable"
      isDragDisabled={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Властивості    | Тип           | Опис                                                                                                              |
| -------------- | ------------- | ----------------------------------------------------------------------------------------------------------------- |
| LeftIcon       | IconComponent | Додатковий лівий значок, що відображається перед текстом у елементі меню                                          |
| accent         | рядок         | Визначає кольоровий акцент елементу меню. It can either be `default`, `placeholder`, and `danger` |
| iconButtons    | масив         | Масив об’єктів, що представляють додаткові кнопки-знаки, пов’язані з елементом меню                               |
| isTooltipOpen  | булевий тип   | Керує видимістю підказки, пов’язаної з елементом меню                                                             |
| onClick        | функція       | Функція зворотного виклику, яка активується при натисканні на посилання                                           |
| текст          | рядок         | Текстовий вміст елементу меню                                                                                     |
| isDragDisabled | булевий тип   | Вказує, чи переміщення вимкнено                                                                                   |
| className      | рядок         | Необов'язкове ім'я для додаткового стилювання                                                                     |

</Tab>
</Tabs>

### Multi Select

Забезпечує спосіб реалізації багатоваріантного вибору з пов'язаним прапорцем.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemMultiSelect } from "twenty-ui/display";

export const MyComponent = () => {

  return (
    <MenuItemMultiSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Властивості    | Тип           | Опис                                                                       |
| -------------- | ------------- | -------------------------------------------------------------------------- |
| LeftIcon       | IconComponent | Додатковий лівий значок, що відображається перед текстом у елементі меню   |
| текст          | рядок         | Текстовий вміст елементу меню                                              |
| обрано         | булевий тип   | Вказує, чи вибрано (встановлено прапорець) елемент меню |
| onSelectChange | функція       | Функція зворотного виклику, що спрацьовує при зміні стану прапорця         |
| className      | рядок         | Необов'язкове ім'я для додаткового стилювання                              |

</Tab>
</Tabs>

### Мульти вибір з аватаркою

Багаторазовий вибір елемента меню з аватаром, прапорцем для вибору та текстовим вмістом.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemMultiSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  return (
    <MenuItemMultiSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Властивості    | Тип         | Опис                                                                       |
| -------------- | ----------- | -------------------------------------------------------------------------- |
| avatar         | `ReactNode` | Аватар або значок, що відображається ліворуч від елементу меню             |
| текст          | рядок       | Текстовий вміст елементу меню                                              |
| обрано         | булевий тип | Вказує, чи вибрано (встановлено прапорець) елемент меню |
| onSelectChange | функція     | Функція зворотного виклику, що спрацьовує при зміні стану прапорця         |
| className      | рядок       | Необов'язкове ім'я для додаткового стилювання                              |

</Tab>
</Tabs>

### Навігація

Елемент меню з додатковим лівим значком, текстовим вмістом та значком у вигляді стрілки вправо.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemNavigate } from "twenty-ui/display";

export const MyComponent = () => {
  const handleNavigation = () => {
    console.log("Navigate to another page");
  };

  return (
    <MenuItemNavigate
      LeftIcon={IconBell}
      text="First Option"
      onClick={handleNavigation}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Властивості | Тип           | Опис                                                                     |
| ----------- | ------------- | ------------------------------------------------------------------------ |
| LeftIcon    | IconComponent | Додатковий лівий значок, що відображається перед текстом у елементі меню |
| текст       | рядок         | Текстовий вміст елементу меню                                            |
| onClick     | функція       | Функція зворотного виклику, що спрацьовує при натисканні елементу меню   |
| className   | рядок         | Необов'язкове ім'я для додаткового стилювання                            |

</Tab>
</Tabs>

### Вибрати

Обираний елемент меню з додатковими лівими елементами (значком та текстом) та індикатором (значок галочки) у вибраному стані.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemSelect } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Властивості | Тип           | Опис                                                                       |
| ----------- | ------------- | -------------------------------------------------------------------------- |
| LeftIcon    | IconComponent | Додатковий лівий значок, що відображається перед текстом у елементі меню   |
| текст       | рядок         | Текстовий вміст елементу меню                                              |
| обрано      | булевий тип   | Вказує, чи вибрано (встановлено прапорець) елемент меню |
| відключено  | булевий тип   | Вказує, чи елемент меню вимкнено                                           |
| hovered     | булевий тип   | Вказує, чи елемент меню наразі підсвічується                               |
| onClick     | функція       | Функція зворотного виклику, що спрацьовує при натисканні елементу меню     |
| className   | рядок         | Необов'язкове ім'я для додаткового стилювання                              |

</Tab>
</Tabs>

### Вибрати Аватар

A selectable menu item with an avatar, featuring optional left content (avatar and text) and an indicator (check icon) for the selected state.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      testId="menu-item-test"
      onClick={handleSelection}
      className
    />
  );
};

```

</Tab>
<Tab title="Props">

| Властивості | Тип         | Опис                                                                       |
| ----------- | ----------- | -------------------------------------------------------------------------- |
| avatar      | `ReactNode` | Аватар або значок, що відображається ліворуч від елементу меню             |
| текст       | рядок       | Текстовий вміст елементу меню                                              |
| обрано      | булевий тип | Вказує, чи вибрано (встановлено прапорець) елемент меню |
| відключено  | булевий тип | Вказує, чи елемент меню вимкнено                                           |
| hovered     | булевий тип | Вказує, чи елемент меню наразі підсвічується                               |
| testId      | рядок       | Атрибут data-testid для цілей тестування                                   |
| onClick     | функція     | Функція зворотного виклику, що спрацьовує при натисканні елементу меню     |
| className   | рядок       | Необов'язкове ім'я для додаткового стилювання                              |

</Tab>
</Tabs>

### Вибрати колір

A selectable menu item with a color sample for scenarios where you want users to choose a color from a menu.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectColor } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectColor
      color="green"
      selected={true}
      disabled={false}
      hovered={true}
      variant="default"
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Властивості | Тип         | Опис                                                                                                                                                                                                                            |
| ----------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| колір       | рядок       | The theme color to be displayed as a sample in the menu item. Опції включають: `зелений`, `бірюзовий`, `небесний`, `синій`, `фіолетовий`, `рожевий`, `червоний`, `оранжевий`, `жовтий`, `сірий` |
| обрано      | булевий тип | Вказує, чи вибрано (встановлено прапорець) елемент меню                                                                                                                                                      |
| відключено  | булевий тип | Вказує, чи елемент меню вимкнено                                                                                                                                                                                                |
| hovered     | булевий тип | Вказує, чи елемент меню наразі підсвічується                                                                                                                                                                                    |
| variant     | рядок       | Варіант зразка кольору. Варіантами можуть бути: `default`, `pipeline`                                                                                                                           |
| onClick     | функція     | Функція зворотного виклику, що спрацьовує при натисканні елементу меню                                                                                                                                                          |
| className   | рядок       | Необов'язкове ім'я для додаткового стилювання                                                                                                                                                                                   |

</Tab>
</Tabs>

### Перемикач

A menu item with an associated toggle switch to allow users to enable or disable a specific feature

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from '@tabler/icons-react';

import { MenuItemToggle } from 'twenty-ui/display';

export const MyComponent = () => {

  return (
    <MenuItemToggle
      LeftIcon={IconBell}
      text="First Option"
      toggled={true}
      toggleSize="small"
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Властивості    | Тип           | Опис                                                                     |
| -------------- | ------------- | ------------------------------------------------------------------------ |
| LeftIcon       | IconComponent | Додатковий лівий значок, що відображається перед текстом у елементі меню |
| текст          | рядок         | Текстовий вміст елементу меню                                            |
| перемикнуто    | булевий тип   | Вказує, чи переключник перебуває у стані «увімкнено» або «вимкнено»      |
| onToggleChange | функція       | Функція зворотного виклику, що спрацьовує при зміні стану перемикача     |
| toggleSize     | рядок         | Розмір перемикача. Ви можете або \\                    |
| className      | рядок         | Необов'язкове ім'я для додаткового стилювання                            |

</Tab>
</Tabs>
